{% extends 'gamer_view/base.html' %}
{% load static %}

{% block title_block %}
	Trending
{% endblock %}

{% block body_block %}

	<!-- content area of the trending page -->
	<div id="trending_content_area">
	
		<!-- content block for the top-rated games -->
		<div id="trending_toprated" class="button">
			<p id="trending_title"> Top-Rated </p>
			<P id="trending_box"></p>
		</div>
		<div id="toprated_image_block">
			<!-- display each of the 5 top-rated games -->
			{% for page in top_rate_pages %}
				<p><a href={% url 'gamer_view:show_page' page.cat page.slug %}><img src="{{ page.image.url }}" id="trending_image" alt="{{ page.gamename }}"></a>
				<div class="page_button" id="trending_description">Description: {{ page.description }}</div>
				</p>
			{% endfor %}
		</div>
		
		<!-- content block for the most viewed games -->
		<div id="trending_mostviewed" class="button">
			<p id="trending_title"> Most Viewed </p>
			<P id="trending_box"></p>
		</div>
		<div id="mostviewed_image_block">
			<!-- display each of the 5 most viewed games -->
			{% for page in most_viewed %}
				<p><a href={% url 'gamer_view:show_page' page.cat page.slug %}><img src="{{ page.image.url }}" id="trending_image" alt="{{ page.gamename }}"></a>
				<div class="page_button" id="trending_description">Description: {{ page.description }}</div>
				</p>
			{% endfor %}
		</div>
	</div>
	
{% endblock %}